<template>
 <div class="header">
     <div class="logo">
       {{merchantName}}
     </div>
     后台管理系统
    <div class="user">
      {{userName}}
    </div>
 </div>
</template>

<script>
 export default {
   data () {
     return {
         userName:'',
         merchantName:''
     }
   },
   components: {

   },
   activated() {
     console.log(this.$routes)
   },
   created() {
       let data = JSON.parse(localStorage.getItem('userInfo'));
       this.userName = data.name;
       this.merchantName = data.merchantName;
   }
 }
</script>

<style>
.header{
    background-color: #fff;
    padding:0;
    display:flex;
    height: 70px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 1px 2px #ddd;
}
.logo{
  width: 250px;
  height: 70px;
  background-color: #222533;
  text-align: center;
  line-height:70px;
  font-weight: bold;
  color:#FFF;
}
.user{
  width: 100px;
}
</style>
